.main-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.top-nav {
  background: #3f51b5;
  color: white;
  padding: 1rem;

  .header {
    display: flex;
    align-items: center;
    padding: 0 1rem;

    .header-left {
      flex: 1;
      display: flex;
      align-items: center;

      .logo {
        height: 40px;
        margin-right: 1rem;
      }
    }

    .header-right {
      margin-left: auto;
      color: white;

      .user-info {
        color: white;
        transition: all 0.3s;

        &:hover {
          color: rgba(255, 255, 255, 0.8);
        }
      }
    }

    .header-right {
      display: flex;
      align-items: center;

      .user-info {
        display: flex;
        align-items: center;
        cursor: pointer;
        padding: 0 12px;
        transition: all 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }

        .username {
          margin-right: 8px;
          font-weight: 500;
        }

        i {
          font-size: 18px;
        }
      }
    }
  }
  
  .nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
    
    li {
      padding: 0.5rem 1rem;
      cursor: pointer;
      margin-right: 1rem;
      display: flex;
      align-items: center;
      color: white;
      
      &:hover {
        background: rgba(255, 255, 255, 0.1);
      }
      
      &.active {
        background: rgba(255, 255, 255, 0.2);
      }
      
      i {
        margin-right: 0.5rem;
        color: white;
      }
    }
  }
}

.content-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.side-menu {
  width: 250px;
  background: #f5f5f5;
  padding: 1rem;
  overflow-y: auto;
  position: relative;
  transition: width 0.3s ease;

  &.collapsed {
    width: 0;
    padding: 0;

    .collapse-button {
      left: 12px;
      transform: translateX(0);
      background: #f5f5f5;
      box-shadow: none;
    }

    ul {
      display: none;
    }
  }

  .collapse-button {
    position: fixed;
    left: 250px;
    top: 50%;
    transform: translateY(-50%);
    margin-left: -12px;
    width: 24px;
    height: 24px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
    transition: all 0.3s ease;

    &:hover {
      background: #f0f0f0;
    }
  }
  
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    
    li {
      list-style: none;
      padding: 0;
      margin: 0;
      
      .menu-item {
        display: flex;
        align-items: center;
        padding: 0.5rem;
        cursor: pointer;
        margin-bottom: 0.5rem;
        border-radius: 4px;
        transition: all 0.2s ease;
        
        &:hover {
          background: rgba(63, 81, 181, 0.15);
          color: #3f51b5;
          font-weight: 500;
        }
        
        &.active {
          background: #3f51b5;
          color: white;
          font-weight: 500;
        }
        
        i:first-child {
          margin-right: 0.5rem;
        }
        
        .expand-icon {
          margin-left: auto;
        }
      }
      
      ul {
        padding-left: 1rem;
        
        li .menu-item {
          padding-left: 1rem;
        }
      }
    }
  }
}


.tab-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
  .tab-header {
    display: flex;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
    
    .tab {
      padding: 0.75rem 1rem;
      cursor: pointer;
      border-right: 1px solid #ddd;
      position: relative;
      display: flex;
      align-items: center;
      
      &:hover {
        background: #e0e0e0;
      }
      
      &.active {
        background: white;
      }
      
      .close-tab {
        margin-left: 0.5rem;
        display: flex;
        align-items: center;
        
        i {
          font-size: 12px;
        }
      }
    }
  }
  
  .tab-content {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
  }
}

@media (max-width: 768px) {
  .side-menu {
    width: 200px;
  }
  
  .top-nav .nav-list li {
    padding: 0.5rem;
    margin-right: 0.5rem;
  }
}

@media (max-width: 576px) {
  .content-container {
    flex-direction: column;
  }
  
  .side-menu {
    width: 100%;
    height: 200px;
  }
}